<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- <script src="node_modules/vue/dist/vue.js"></script> -->
  <script src="dist/umd//vue.js"></script>
  <div id="app">
    {{a}}
  </div>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        a: {a:{b:3}},
        c: {}
      },
      watch: {
        //4 种写法 1 直接方法  2. handler  3数组 4 调用methods里的
        //1
        // 'a'(newV, oldV) {
        //   console.log('ok')
        // }
        // 2
        'a.a.b': {
          handler(newV, oldV){
          //  console.log(this, newV, oldV)
          },
          immediate: true,
        },
        // immediate: true,
        //3
        // 'a': [
        //   (newV, oldV)=> {
        //     console.log(newV, oldV)
        //   },
        //   (newV, oldV)=> {
        //     console.log(newV, oldV)
        //   }
        // ]
        //4
        // 'a': 'aa'
      },
      methods: {
        aa() {
          // console.log(11)
        }
      }
    });
   
    setTimeout(()=> {
      vm.a.a.b = 200;
    })
    vm.a.a.b = 100; //会触发set 方法 =》 set方法会调用watcher.run
    // console.log(vm, vm.a)
  </script>

</body>
</html>